<template>
  <div class="corp-progress-comp">
    <div class="title-content">
      <p class="title">进度情况</p>
    </div>
    <div class="progress-echarts">
      <Histogram :options="options"></Histogram>
    </div>
    <main>
      <div class="progress-list">
        <el-table
          :data="tableData"
          row-key="name"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column label="项目" :width="$setRem(200)">
            <template slot-scope="scope">
            <span class="project-name" :title="scope.row.name">
              {{ scope.row.name }}
            </span>
            </template>
          </el-table-column>
          <el-table-column
            class-name="cell-custom"
            prop="startTime"
            :width="$setRem(90)"
            label="开工日期">
          </el-table-column>
          <el-table-column
            class-name="cell-custom"
            prop="endTime"
            :width="$setRem(90)"
            label="竣工日期">
          </el-table-column>
          <el-table-column
            class-name="cell-custom"
            prop="status"
            label="当前阶段">
          </el-table-column>
          <el-table-column
            prop="unit"
            :width="$setRem(60)"
            label="进度">
          </el-table-column>
        </el-table>
      </div>
    </main>
  </div>
</template>

<script>
import Histogram from '@/components/echarts/base';

export default {
  name: 'tmp',
  data() {
    return {
      tableData: [
        {
          name: '余政储（2020）1000号地块建设项目1',
          startTime: '2020.10.25',
          endTime: '2021.10.25',
          unit: '80%',
          status: '建设阶段'
        },
        {
          name: '余政储（2020）1000号地块建设项目2',
          startTime: '2020.10.25',
          endTime: '2021.10.25',
          unit: '80%',
          status: '建设阶段'
        },
        {
          name: '余政储（2020）1000号地块建设项目3',
          startTime: '2020.10.25',
          endTime: '2021.10.25',
          unit: '80%',
          status: '建设阶段'
        },
        {
          name: '余政储（2020）1000号地块建设项目4',
          startTime: '2020.10.25',
          endTime: '2021.10.25',
          unit: '80%',
          status: '建设阶段'
        },
        {
          name: '余政储（2020）1000号地块建设项目5',
          startTime: '2020.10.25',
          endTime: '2021.10.25',
          unit: '80%',
          status: '建设阶段'
        },
        {
          name: '余政储（2020）1000号地块建设项目6',
          startTime: '2020.10.25',
          endTime: '2021.10.25',
          unit: '80%',
          status: '建设阶段'
        }
      ],
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['基础阶段', '主体阶段', '装饰阶段', '配套阶段', '竣工'],
          show: true,
          axisLabel: {
            color: '#fff'
          },
          // 轴线
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          // 轴线
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            data: [80, 50, 20, 10, 30, 40],
            barWidth: 45,
            barCateGoryGap: '2%',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#1841d9'
              }, {
                offset: 0.5,
                color: '#6685fe'
              }])
            },
            label: {
              position: 'top',
              show: true,
              color: '#fff'
            }
          }
        ]
      }
    };
  },
  components: {
    Histogram
  }
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/table';

.corp-progress-comp {
  width: 100%;
  height: 640px;
  .title-content {
    height: 30px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    /*margin-bottom: 20px;*/
  }
  .title {
    width: calc(100% - 10px);
    background: linear-gradient(to left, #18235f, #414d96);
    padding: 5px 15px;
    font-size: 15px;
    margin-bottom: 20px;
    color: $mainColor;
    text-align: right;
    border-radius: 13px 10px 10px 0;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    &:after {
      content: '';
      position: absolute;
      left: -14px;
      top: 11px;
      width: 0;
      height: 0;
      border-width: 5px 16px;
      border-style: solid;
      border-color: #414d96 transparent transparent #414d96;
      border-radius: 6px 15px 0 0;
      z-index: 1;
      transform: rotate(-65deg);
    }
  }
  .progress-echarts {
    width: 100%;
    height: 190px;
  }
  main {
    width: 100%;
    max-height: 420px;
    overflow: hidden;
    background-color: $mainBg;
    border-radius: 7px;
    padding-bottom: 20px;
    .progress-list {
      width: 100%;
      height: 420px;
      overflow: auto;
      .project-name {
        /*max-width: 130px;*/
        /*overflow : hidden;*/
        /*text-overflow: ellipsis;*/
        /*display: -webkit-box;*/
        /*-webkit-line-clamp: 2;*/
        /*-webkit-box-orient: vertical;*/
      }
      /deep/ .el-table {
        height: 100%;
        .el-table__body-wrapper {
          height: calc(100% - 40px);
        }
        .cell-custom {
          font-size: 14px;
        }
        .cell {
          line-height: 18px;
        }
      }
    }
  }
}
@media screen and (min-width: 1800px) {
  @media screen and (max-height: 1000px) {
    .corp-progress-comp main {
      max-height: 320px;
      .progress-list {
        height: 320px;
      }
    }
  }
  @media screen and (max-height: 950px) {
    .corp-progress-comp main {
      max-height: 300px;
      .progress-list {
        height: 300px;
      }
    }
  }
}
</style>
